<template>
  <view class="container">
    <view class="header">
      <text class="title">注册</text>
    </view>
    
    <view class="form-container">
      <view class="input-group">
        <text class="label">请输入用户名</text>
        <input 
          class="input" 
          type="text" 
          placeholder="请输入用户名"
          v-model="username"
          placeholder-class="placeholder"
        />
      </view>
      
      <view class="input-group">
        <text class="label">请输入密码</text>
        <input 
          class="input" 
          type="password" 
          placeholder="请输入密码"
          v-model="password"
          placeholder-class="placeholder"
        />
      </view>
      
      <view class="input-group">
        <text class="label">确认密码</text>
        <input 
          class="input" 
          type="password" 
          placeholder="请再次输入密码"
          v-model="confirmPassword"
          placeholder-class="placeholder"
        />
      </view>
      
      <button 
        class="register-btn" 
        :class="{ 'active': isFormValid }"
        @click="handleRegister"
        :disabled="!isFormValid"
      >
        注册
      </button>
      
      <view class="login-link">
        <text class="login-text">已有账号？</text>
        <navigator 
          url="/pages/login/login" 
          open-type="navigateBack"
          class="link"
        >
          去登录
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      confirmPassword: ''
    }
  },
  computed: {
    isFormValid() {
      return this.username && this.password && this.confirmPassword && this.password === this.confirmPassword
    }
  },
  methods: {
    handleRegister() {
      if (!this.isFormValid) {
        if (this.password !== this.confirmPassword) {
          uni.showToast({
            title: '两次密码输入不一致',
            icon: 'none'
          })
        }
        return
      }
      
      // 模拟注册成功
      uni.showToast({
        title: '注册成功',
        icon: 'success'
      })
      
      // 延迟返回登录页
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
      
      // 在实际应用中，这里会调用注册API
      console.log('注册信息:', {
        username: this.username,
        password: this.password
      })
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  padding: 40rpx;
}

.header {
  margin-top: 120rpx;
  margin-bottom: 80rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;
}

.form-container {
  width: 100%;
  max-width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.input-group {
  margin-bottom: 50rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.input {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  transition: border-color 0.3s;
}

.input:focus {
  border-color: #f5576c;
}

.placeholder {
  color: #999;
  font-size: 28rpx;
}

.register-btn {
  width: 100%;
  height: 88rpx;
  background: #e0e0e0;
  border-radius: 12rpx;
  border: none;
  color: #999;
  font-size: 32rpx;
  font-weight: 500;
  margin-top: 20rpx;
  transition: all 0.3s;
}

.register-btn.active {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: #fff;
  box-shadow: 0 6rpx 20rpx rgba(245, 87, 108, 0.4);
}

.register-btn.active:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 15rpx rgba(245, 87, 108, 0.3);
}

.login-link {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40rpx;
}

.login-text {
  font-size: 28rpx;
  color: #666;
}

.link {
  color: #f5576c;
  font-size: 28rpx;
  margin-left: 10rpx;
  text-decoration: none;
}
</style>